<template>
  <a-layout class="layout">
    <!-- 侧边栏 -->
    <a-layout-sider
      v-model:collapsed="collapsed"
      :trigger="null"
      collapsible
      class="sider"
    >
      <div class="logo">
        <img src="../assets/logo.png" alt="logo" />
        <span v-show="!collapsed">实验室设备管理系统</span>
      </div>
      <a-menu
        v-model:selectedKeys="selectedKeys"
        theme="dark"
        mode="inline"
        class="menu"
      >
        <a-menu-item key="dashboard">
          <template #icon><dashboard-outlined /></template>
          <span>仪表盘</span>
        </a-menu-item>
        <a-menu-item key="equipment">
          <template #icon><tool-outlined /></template>
          <span>设备管理</span>
        </a-menu-item>
        <a-menu-item key="borrow">
          <template #icon><swap-outlined /></template>
          <span>借用管理</span>
        </a-menu-item>
        <a-menu-item key="maintenance">
          <template #icon><tool-outlined /></template>
          <span>维护记录</span>
        </a-menu-item>
        <a-menu-item key="users">
          <template #icon><team-outlined /></template>
          <span>用户管理</span>
        </a-menu-item>
        <a-menu-item key="settings">
          <template #icon><setting-outlined /></template>
          <span>系统设置</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>

    <a-layout class="main-layout">
      <!-- 顶部导航 -->
      <a-layout-header class="header">
        <div class="header-left">
          <menu-unfold-outlined
            v-if="collapsed"
            class="trigger"
            @click="() => (collapsed = !collapsed)"
          />
          <menu-fold-outlined
            v-else
            class="trigger"
            @click="() => (collapsed = !collapsed)"
          />
        </div>
        <div class="header-right">
          <a-dropdown>
            <a class="user-dropdown" @click.prevent>
              <a-avatar :size="32" icon="user" />
              <span class="username">{{ username }}</span>
            </a>
            <template #overlay>
              <a-menu>
                <a-menu-item key="profile">
                  <user-outlined />
                  个人信息
                </a-menu-item>
                <a-menu-item key="settings">
                  <setting-outlined />
                  账号设置
                </a-menu-item>
                <a-menu-divider />
                <a-menu-item key="logout" @click="handleLogout">
                  <logout-outlined />
                  退出登录
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </div>
      </a-layout-header>

      <!-- 内容区域 -->
      <a-layout-content class="content">
        <div class="content-wrapper">
          <router-view></router-view>
        </div>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  DashboardOutlined,
  ToolOutlined,
  SwapOutlined,
  TeamOutlined,
  SettingOutlined,
  UserOutlined,
  LogoutOutlined
} from '@ant-design/icons-vue'

const router = useRouter()
const collapsed = ref(false)
const selectedKeys = ref(['dashboard'])
const username = ref('管理员') // 这里应该从用户信息中获取

const handleLogout = () => {
  localStorage.removeItem('token')
  message.success('已退出登录')
  router.push('/login')
}
</script>

<style scoped>
.layout {
  min-height: 100vh;
  display: flex;
  width: 100vw;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.sider {
  display: flex;
  flex-direction: column;
  box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
  z-index: 10;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  overflow: hidden;
}

.logo {
  height: 64px;
  padding: 16px;
  display: flex;
  align-items: center;
  background: #002140;
  flex-shrink: 0;
}

.logo img {
  height: 32px;
  margin-right: 8px;
}

.logo span {
  color: white;
  font-size: 16px;
  font-weight: bold;
  white-space: nowrap;
}

.menu {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.main-layout {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-left: 200px;
  width: calc(100vw - 200px);
  overflow: hidden;
}

.main-layout .ant-layout-sider-collapsed + & {
  margin-left: 80px;
  width: calc(100vw - 80px);
}

.header {
  background: #fff;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 9;
  width: 100%;
}

.header-left {
  display: flex;
  align-items: center;
}

.header-right {
  display: flex;
  align-items: center;
}

.trigger {
  font-size: 18px;
  cursor: pointer;
  transition: color 0.3s;
  padding: 0 12px;
}

.trigger:hover {
  color: #1890ff;
}

.user-dropdown {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0 12px;
}

.username {
  margin-left: 8px;
  color: rgba(0, 0, 0, 0.85);
}

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  background: #f0f2f5;
  width: 100%;
}

.content-wrapper {
  flex: 1;
  background: #fff;
  margin: 24px;
  border-radius: 4px;
  overflow: auto;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  width: calc(100% - 48px);
  height: calc(100% - 48px);
}

/* 响应式布局 */
@media screen and (max-width: 768px) {
  .main-layout {
    margin-left: 0;
    width: 100vw;
  }

  .sider {
    position: fixed;
    z-index: 1000;
  }

  .content-wrapper {
    margin: 12px;
    width: calc(100% - 24px);
    height: calc(100% - 24px);
  }
}

/* 自定义滚动条样式 */
.menu::-webkit-scrollbar,
.content-wrapper::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.menu::-webkit-scrollbar-thumb,
.content-wrapper::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.menu::-webkit-scrollbar-track,
.content-wrapper::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
}
</style> 